<template>
	<view class="register_box">
		<!-- #ifndef H5 -->
		<image class="register_bg" :src="$fun.imgUrl('webimage/login-video.png')"
			:style="{width: '100vw',height: `${screenHeight}px`}" mode=""></image>
		<!-- #endif -->
		<view class="login_box">
			<view class="switch" style="" @click="show=true">
				<image src="@/static/switch.png" mode=""></image>
				<text class="cell-tip"
					style="color: #fff;margin-left: 10rpx;">{{lang}}</text>
			</view>
			<image class="logo" src="/static/login_logo.png" mode=""></image>
			<view class="login_title">
				{{$t('title')}}
			</view>
			<view class="login_input">
				<input type="text" v-model="mobile" maxlength="11" :placeholder="$t('login.name21')">
			</view>
			<view class="login_input">
				<input type="password" v-model="password" :placeholder="$t('login.name1')">
			</view>
			<view class="" style="display: flex;justify-content: flex-end;">
				<text @click="$fun.jump(`/pageA/public/find`)"
					style="z-index: 100;color: #5990FF;text-align: center;font-size: 24rpx;text-align: right;margin-right: 80rpx;">
					{{$t('login.name3')}}
				</text>
			</view>
			<!-- <view @click="$fun.jump(`./find`)"  style="z-index: 100;color: #FE555A;text-align: center;font-size: 24rpx;text-align: right;margin-right: 80rpx;">
				忘记密码
			</view> -->
			<view class="login_button" style="margin-top: 50rpx;" @click="toLogin()">
				{{$t('login.name4')}}
			</view>

			<!-- #ifdef H5 -->
			<view class="download"
				style="z-index: 100;color: #5990FF;margin-top: 50rpx;text-align: center;font-size: 24rpx;"
				@click="goApp">
				{{$t('login.name6')}}
			</view>
			<!-- #endif -->
		</view>

		<view class="register-section">
			<!-- #ifndef H5 -->
			<!-- 微信登录 -->
			<!-- <view class="" style="margin: 30rpx;">
				<view style="margin: 20rpx;color: #fff;">第三方登录</view>
				<view class="" @click="weixinLogin">
					<image style="width: 50rpx;height: 50rpx;background-color: #fff;border-radius: 50%"
						src="/static/weixin.png" mode=""></image>
				</view>
			</view> -->
			<!-- #endif -->
			<view class="">
				<checkbox @click="isCh=!isCh" :checked="isCh" /><text style="color: #606266;">{{$t('login.name5')}} <text
						@click="$fun.jump(`/pageB/noticeList/noticeInfo?name=${$t('login.name22')}&type=16`)">{{$t('login.name22')}}</text> ,<text
						@click="$fun.jump(`/pageB/noticeList/noticeInfo?name=${$t('login.name23')}&type=15`)">{{$t('login.name23')}}</text> </text>
			</view>
			<view class="">
				{{$t('login.name24')}}
				<text @click="$fun.jump(`/pageA/public/register`)">{{$t('login.name25')}}</text>
			</view>
		</view>
		<u-popup :show="show" @close="show = false" mode="center" round="10" bgColor="rgba(75, 75, 75, 0.8)">
			<view class="lang" style="width: 500rpx;color: #fff;text-align: center;">
				<view class="title">{{$t('lang.togger')}}</view>
				<view :class="['item',_i18n.locale == 'zh-cn'?'active':'']" @click="setLang('zh-cn',$t('lang.zh'))">{{$t('lang.zh')}}</view>
				<view :class="['item',_i18n.locale == 'zh-tw'?'active':'']" @click="setLang('zh-tw',$t('lang.zhtw'))">{{$t('lang.zhtw')}}</view>
				<view :class="['item',_i18n.locale == 'zh-en'?'active':'']" @click="setLang('zh-en',$t('lang.en'))">{{$t('lang.en')}}</view>
				<view :class="['item',_i18n.locale == 'zh-rw'?'active':'']" @click="setLang('zh-rw',$t('lang.jp'))">{{$t('lang.jp')}}</view>
				<view :class="['item',_i18n.locale == 'zh-hw'?'active':'']" @click="setLang('zh-hw',$t('lang.ko'))">{{$t('lang.ko')}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import {
	// 	mapMutation
	// } from 'vuex';

	import loginVue from './login.vue'

	export default {
		data() {
			return {
				mobile: '',
				password: '',
				loginList: [],
				screenHeight: 0,
				isClick: false,
				configObj: {},
				isCh: false,
				show:false,
				lang:''
			}
		},
		onLoad(options) {
			this.lang=uni.getStorageSync('lang')||this.$t('lang.zh')
			if (options.adminMobile) {
				this.mobile = options.adminMobile
				this.password = options.adminPassword
			}
			var that = this
			uni.getSystemInfo({
				success(res) {
					console.info('系统信息...', res)
					that.screenHeight = res.windowHeight
					console.log(that.screenHeight)
				}
			})
			this.$fun.ajax.post('index/config', {}).then(res => {
				this.configObj = res.data
			})
		},
		methods: {
			setLang(val,lang) {
				if (this._i18n.locale == val) return
				// 切换为英文
				this._i18n.locale = val
				this.lang=lang
				uni.setStorageSync('language', val)
				uni.setStorageSync('lang', lang)
				if(val=='zh-cn'){
					uni.setLocale('zh-Hans')
				}else if(val=='zh-en'){
					uni.setLocale('en')
				}else{
					uni.setLocale('zh-Hant')
				}
				// const  message = this._i18n.locale === 'en' ? enLocale : zhLocale
				// this._i18n.setLocaleMessage(val,message)   //无感刷新
				this.show = false
				this.$fun.msg(this.$t('user.name22'))
			},
			weixinLogin() {
				const that = this
				if (!this.isCh) {
					this.$fun.msg(this.$t('login.name7'));
					return
				}
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event) => {
						const {
							code
						} = event
						// 微信=wechat 小程序 wechatmini
						// #ifdef APP-PLUS || H5
						let params = {
							platform: 'wechat',
							code
						}
						// #endif
						// #ifdef MP-WEIXIN
						let params = {
							platform: 'wechatmini',
							code
						}
						// #endif
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						that.$fun.ajax.post('user/third', params).then(result => {
							if (result.code === 1) {
								const {
									nickname,
									mobile,
									avatar,
									token,
									username
								} = result.data.userinfo
								let ispush = true
								let arr = uni.getStorageSync('userCode') ? JSON.parse(uni
									.getStorageSync('userCode')) : [];
								if (arr.length == 0) {
									arr.push({
										account: mobile,
										avatar: avatar
									})
								}
								for (var i = 0; i < arr.length; i++) {
									if (arr[i].account == mobile) {
										ispush = false
									}
								}
								if (ispush) {
									arr.push({
										account: mobile,
										avatar
									})
								}
								uni.setStorageSync('userCode', JSON.stringify(arr))
								that.isClick = false
								uni.setStorageSync('token', result.data.userinfo.token)
								that.$fun.msg(result.msg)
								mobile ? that.$fun.jump('/pages/index/index', 3, 1200) : uni
									.redirectTo({
										url: '/pageA/setMobile/setMobile'
									})
							} else {
								that.isClick = false
							}
						})
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码 
						// uni.hideLoading();
					}
				})
			},
			goApp() {
				location.href = this.configObj.download_address
			},
			async toLogin() {
				if (this.isClick) {
					return
				}
				const {
					mobile,
					password
				} = this;
				if (!this.isCh) {
					this.$fun.msg(this.$t('login.name7'));
					return
				}
				// 手机号为空
				if (!mobile) {
					this.$fun.msg(this.$t('login.name21'));
					return
				}
				// 密码为空
				if (!password) {
					this.$fun.msg(this.$t('login.name1'));
					return
				}
				this.isClick = true
				const sendData = {
					account: mobile,
					password: password,
				};
				console.log(sendData)
				const result = await this.$fun.ajax.post('user/login', sendData);
				if (result.code === 1) {
					let ispush = true
					let arr = uni.getStorageSync('userCode') ? JSON.parse(uni.getStorageSync('userCode')) : [];
					if (arr.length == 0) {
						arr.push({
							account: mobile,
							password: password,
							avatar: result.data.userinfo.avatar
						})
					}
					for (var i = 0; i < arr.length; i++) {
						if (arr[i].account == mobile) {
							ispush = false
						}
					}
					if (ispush) {
						arr.push({
							account: mobile,
							password: password,
							avatar: result.data.userinfo.avatar
						})
					}
					uni.setStorageSync('userCode', JSON.stringify(arr))
					this.isClick = false
					uni.setStorageSync('token', result.data.userinfo.token)
					this.$fun.msg(result.msg)
					this.$fun.jump('/pages/index/index', 3, 1200)
				} else {
					this.isClick = false
				}
			}
		},

	}
</script>

<style lang='scss'>
	.lang {
		.title {
			font-size: 34rpx;
			font-weight: 600;
			margin: 30rpx 0 50rpx 0;
		}
	
		.item {
			font-size: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
		}
	
		.active {
			background-color: rgb(48, 158, 248);
			font-weight: 600;
		}
	}
	page {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.register_box {
			height: 100%;
			/* #ifdef H5 */
			background: url('../img/login-video.png') no-repeat center center;
			background-size: 100%;
			padding-top: 150upx;

			/* #endif */
			W .register_bg {
				position: absolute;
				top: 0;
				left: 0;
			}
			.switch {
				position: absolute;
				top: 40rpx;
				right: 20rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.login_box {
				/* #ifndef H5 */
				position: absolute;
				top: 15%;
				left: 50%;
				transform: translate(-50%);
				/* #endif */
				/* #ifdef H5 */
				margin: 0 auto 200rpx;
				/* #endif */
				width: 625upx;
				height: 833upx;
				background: rgba(0, 0, 0, .7);
				border-radius: 7upx;

				.logo {
					width: 210upx;
					height: 210upx;
					border-radius: 20rpx;
					position: relative;
					top: -105upx;
					left: 207.5upx;
				}

				.login_title {
					text-align: center;
					font-size: 50upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #FFFFFF;
					margin-bottom: 85upx;
				}

				.login_input {
					margin: 0 auto;
					margin-bottom: 14upx;
					width: 486upx;
					height: 105upx;
					background: #FFFFFF;
					border-radius: 7upx;

					input {
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						padding: 20upx;
						border: none;
					}
				}

				.login_button {
					margin: 0 auto;
					margin-top: 107upx;
					width: 486upx;
					height: 105upx;
					background: linear-gradient(90deg, #5990FF 0%, #55aaff 100%);
					border-radius: 7upx;
					text-align: center;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 40upx;
				}
			}
		}

		.register-section {
			/* #ifndef H5 */
			position: absolute;
			left: 0;
			bottom: 50upx;
			/* #endif */
			width: 100%;
			font-size: $font-sm+2upx;
			color: $font-color-base;
			text-align: center;

			text {
				color: #5990FF;
				margin-left: 10upx;
			}
		}
	}
</style>